<template>
 <div>
  <button
  :class="[`button-${type}`,{
  'button-disabled':disabled}]"
  >
    <slot></slot>
  </button>
 </div>
</template>
<script>
export default{
    name:'BtnCom',
    props:{
      type:{
        type:String
      },
      disabled:{
        type:Boolean,
        debugger:false
      }
    },
    data () {
        return {
            
        }
    },
    created () {
      console.log(this.type)
      
    },
    computed:{
    },
    methods:{
    }
}
</script>
<style lang='less'  scoped>
button {
  outline: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 4px;
}
        .button-primary{
      background-color: #66b1ff;
    }
    .button-success{
      background-color: #85ce61;
    }
    .button-info{
      background-color: #909399;
    }
    .button-warning{
      background-color: #e6a23c;
    }
    .button-danger{
      background-color: pink;
    }
    .button-danger:hover{
      background-color:  #f56c6c;
    }
    
.button-disabled{
  cursor:not-allowed
}
</style>
